<template>
  <div class="realmName">
   <div class="navbar">
       <img class="logo" src="../assets/images/index/logo.png" alt="">
        <div class="navbarRight">
            <search></search>
            <language ref="language"  @click="languageClick()"></language>
        </div>
   </div>
   <div class="realmName-content">
       <div class="left">
           <div class="network">
               <div class="top">
                   <div class="img">
                        <img src="../assets/images/index/logo2.png" alt="">
                   </div>
                   <div>
                       <p>0X789...2344</p>
                       <p><i></i>MAIN网络</p>
                   </div>
               </div>
               <button class="button">断开链接</button>
           </div>
           <ul class="menu">
               <li @click="menuClick(1)" :class="{active:index==1}">
                   <img src="../assets/images/index/域名-点击.png" v-if="index==1" alt="">
                   <img src="../assets/images/index/域名.png"  v-else alt="">
                   <span>我的域名</span>
                </li>
               <li @click="menuClick(2)" :class="{active:index==2}">
                   <img src="../assets/images/index/收藏-点击.png"  v-if="index==2" alt="">
                   <img src="../assets/images/index/收藏.png"  v-else alt="">
                   <span>收藏</span>
                </li>
               <li @click="menuClick(3)" :class="{active:index==3}">
                   <img src="../assets/images/index/问题-点击.png"  v-if="index==3" alt="">
                   <img src="../assets/images/index/问题.png"  v-else alt="">
                <span>常见问题</span></li>
               <li @click="menuClick(4)" :class="{active:index==4}">
                   <img src="../assets/images/index/参考-点击.png"  v-if="index==4" alt="">
                   <img src="../assets/images/index/参考.png"  v-else alt="">
                <span>关于</span></li>
           </ul>
       </div>
       <ul class="container">
           <!-- <router-view><router-view> -->
           <!-- 我的域名 -->
           <li class="right"  v-if="index=='1'?isShowRealm:!isShowRealm">
                <div class="card card1">
                    <div class="card-l">
                        <img src="../assets/images/index/logo2.png" alt="">
                        <span>edededededeedsdsdsdsfrfcdcdcdc</span>
                    </div>
                    <button class="button"><span>在 Etherscan 上查看</span><img src="" alt=""></button>
                </div>
                <div class="card card2">
                    <el-collapse class="collapse" v-model="activeNames" @change="handleChange">
                        <el-collapse-item name="1">
                            <template slot="title">
                            <span style="color:#70cbff;font-size:14px;">主要 BAB 名称(反向记录)：未设置</span>
                            </template>
                            <div style="color:#999;font-size:12px;width:660px;line-height:16px;">这将指定您的一个 BAB 名称来代表您的以太坊帐户并充当您的跨平台 web3 用户名和个人资料。每个以太坊账户只能有一个主 BAB 名称，并且可以随时更改。</div>
                            <div style="color:#FF7B7B;font-size:14px;line-height:18px;margin:10px 0;">没有 BAB 名称将其 BNB 地址记录设置为此地址。</div>
                            <div style="color:#999;font-size:12px;line-height:16px;">只有指向您的以太坊账户的 ENS 名称可以设置为您的主要 ENS 名称。</div>
                            <div style="margin-top:32px;text-align: right;"><el-button type="primary">取 消</el-button><el-button type="info" class="info">保 存</el-button></div>
                        </el-collapse-item>
                        </el-collapse>
                </div>
                <div class="card card2">
                    <el-tabs v-model="activeName2" @tab-click="handleClick">
                            <el-tab-pane label="注册人" name="first">

                            </el-tab-pane>
                            <el-tab-pane label="控制器" name="second">

                            </el-tab-pane>
                        </el-tabs>
                        <el-button class="btn" type="info">给已勾选的项目续费</el-button>
                </div>
            </li>
            <!-- 收藏 -- 已收藏 -->
            <li class="right  book" v-if="index=='2'?isShowRealm:!isShowRealm">
                <!-- 空状态 -->
                <div class="card empty">
                    <img src="../assets/images/index/收藏.png" alt="">
                    <span>没有名字被保存</span>
                        <p>要将名称添加到收藏夹，请单击任何所需名称旁边的心形图标</p>
                </div>
                <!-- 已收藏 -->
                <div>
                    <div class="card collected">
                        <div class="collected-top">
                            <span>收藏</span>
                            <div v-show="!isShowRenew">
                                <el-checkbox v-model="checked">全选</el-checkbox>
                                <el-button type="info" @click="renew">续期</el-button>
                            </div>
                        </div>
                        <div class="collected-content" v-show="isShowRenew">
                            <div>
                                <img width="12px" src="../assets/images/index/Vector.png" alt="">
                                <span style="font-size:12px;color:#70cbff;">增加注册期限，避免每年支付gas</span>
                            </div>
                            <div class="info">
                                <div class="time">
                                    <span style="margin-top:24px;display:inline-block;color:#808080;font-size:12px;">报名时间</span>
                                    <div class="input">
                                        <el-input class="timeInput" type="number" v-model="time" ></el-input>
                                        <span style="display:inline-block;color:#4d4d4d;margin:0 20px;">年</span>
                                        <el-button>-</el-button>
                                        <el-button>+</el-button>
                                    </div>
                                </div>
                                <div class="time const">
                                    <span style="margin-top:24px;margin-bottom:12px; display:inline-block;color:#808080;font-size:12px;">支付注册费用</span>
                                    <el-input size="small" value="3.432eth" disabled></el-input>
                                </div>
                            </div>
                            <p style="font-size:12px;color:#FF7B7B;margin-bottom:14px;display:inline-block">*扩展您不拥有的名称的注册并不赋予您对该名称的所有权。</p>
                        </div>
                        <div v-show="isShowRenew" class="collected-top bottom" style="display:block;height:50px;">
                            <div style="text-align: right;">
                                <el-checkbox v-model="checked">全选</el-checkbox>
                                <el-button type="info" @click="renew">取消</el-button>
                                <el-button type="info" class="active">延长</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="card collected-list" style="height:64px;">
                        <div class="left"><i></i><span>123.eth</span></div>
                        <div class="r">
                            <span>2023.09029 23:23(UTC+08:00)到期</span>
                            <span style="margin-left:30px;display:inline-block;">不可用</span>
                            <img src="../assets/images/index/收藏-点击.png" alt="">
                            <el-checkbox v-model="checked"></el-checkbox>
                        </div>
                    </div>
                    <div class="card collected-list" style="height:64px;">
                        <div class="left"><i class="gray"></i><span>123.eth</span></div>
                        <div class="r">
                            <span>2023.09029 23:23(UTC+08:00)到期</span>
                            <span style="margin-left:30px;display:inline-block;">不可用</span>
                            <img src="../assets/images/index/收藏.png" alt="">
                            <el-checkbox v-model="checked"></el-checkbox>
                        </div>
                    </div>
                    <div class="card collected-list" style="height:64px;">
                        <div class="left"><i class="gray"></i><span>123.eth</span></div>
                        <div class="r">
                            <span>2023.09029 23:23(UTC+08:00)到期</span>
                            <span style="margin-left:30px;display:inline-block;">不可用</span>
                            <img src="../assets/images/index/收藏.png" alt="">
                            <el-checkbox v-model="checked"></el-checkbox>
                        </div>
                    </div>
                </div>
            </li>
            <li class="right" v-if="index=='3'?isShowRealm:!isShowRealm">
                 <div class="card collected-list" style="height:64px;">
                        <div class="left">
                            <span>123.eth</span>
                            <img src="../assets/images/index/Vector (1).png" alt="">
                        </div>
                        <div class="r" style="width:18px;">
                            <img src="../assets/images/index/收藏-点击.png" alt="">
                        </div>
                 </div>
                 <div class="card cardL">
                     <div class="card-list">
                         <span class="title">PARENT</span>
                         <div class="card-list-r">
                             <span style="color:#f2b92c;">PARENT</span>
                         </div>
                     </div>
                     <div class="card-list">
                         <span class="title">REGISTRANT</span>
                         <div class="card-list-r">
                             <span style="color:#f2b92c;"><i></i> 2023.09029 23:23(UTC+08:00) <img src="../assets/images/index/Vector (1).png" alt=""></span>
                         </div>
                     </div>
                     <div class="card-list">
                         <span class="title">CONTROLLER</span>
                         <div class="card-list-r">
                             <span style="color:#f2b92c;"><i></i>2023.09029 23:23(UTC+08:00) <img src="../assets/images/index/Vector (1).png" alt=""></span>
                         </div>
                     </div>
                     <div class="card-list">
                         <span class="title">EXPIRATION</span>
                         <div class="card-list-r">
                             <span>2023.09029 23:23(UTC+08:00)</span>
                             <el-button size="small" class="Extend" v-show="!isShowExtend" @click="extendClick">Extend</el-button>
                         </div>
                     </div>
                     <div class="extend-content" v-show="isShowExtend">
                             <div class="collected-content">
                            <div>
                                <img width="12px" src="../assets/images/index/Vector.png" alt="">
                                <span style="font-size:12px;color:#70cbff;">增加注册期限，避免每年支付gas</span>
                            </div>
                            <div class="info">
                                <div class="time">
                                    <span style="margin-top:24px;display:inline-block;color:#808080;font-size:12px;">报名时间</span>
                                    <div class="input">
                                        <el-input class="timeInput" type="number" v-model="time"></el-input>
                                        <span style="display:inline-block;color:#4d4d4d;margin:0 20px;">年</span>
                                        <el-button>-</el-button>
                                        <el-button>+</el-button>
                                    </div>
                                </div>
                                <div class="time const">
                                    <span style="margin-top:24px;margin-bottom:12px; display:inline-block;color:#808080;font-size:12px;">支付注册费用</span>
                                    <el-input size="small" value="3.432eth" disabled></el-input>
                                </div>
                            </div>
                            <p style="font-size:12px;color:#FF7B7B;margin-bottom:14px;display:inline-block">*扩展您不拥有的名称的注册并不赋予您对该名称的所有权。</p>
                        </div>
                        <div v-show="isShowExtend" class="collected-top bottom" style="display:block;height:50px;">
                            <div style="text-align: right;">
                                <el-checkbox v-model="checked">全选</el-checkbox>
                                <el-button type="info" @click="extendClick">取消</el-button>
                                <el-button type="info" class="active">延长</el-button>
                            </div>
                        </div>
                     </div>
                     <div class="card-list">
                         <span class="title">RESOLVER</span>
                         <div class="card-list-r">
                             <span>No Resolver set </span>
                             <el-button size="small" class="Extend set">set</el-button>
                         </div>
                     </div>
                 </div>
            </li>
            <li class="right" v-if="index=='4'?isShowRealm:!isShowRealm">
                关于
            </li>
       </ul>
   </div>
  </div>
</template>

<script>
import language from '@/components/views/language.vue';
import search from '@/components/views/search.vue';
export default {
  name: 'searchPage',
  components:{
    search,
    language
  },
  data () {
    return {
       isClick:false,
       activeNames: ['1'],
       activeName2: 'first',
       isShowRealm:true,
       time:'1',
       isShowRenew:false,
       isShowExtend:false,
       checked:true,
       index:'1'
    }
  },
  methods:{
    
    handleChange(val) {
        console.log(val);
      },
    languageClick(){
        this.$refs.language.btnClick()
    },
    handleClick() {
    this.isClick = !this.isClick
        console.log(this.isClick)
    },
    renew(){
        this.isShowRenew = !this.isShowRenew
    },
    extendClick(){
        this.isShowExtend = !this.isShowExtend
    },
    menuClick(val){
        this.index = val
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.realmName{
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #1a1a1a;
}
.navbar{
    height: 100px;
    padding:0 40px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    background-color: #262626;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.navbar .logo{
    width: 164px;
    height: auto;
}
.navbar .navbarRight{
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.navbar .navbarRight .search{
    width: 296px;
    height: 32px;
}
.navbar .navbarRight .search .el-button{
    height: 32px;
}
.realmName-content{
    padding:0 16px;
    margin-top: 16px;
    display: flex;
  flex-direction: row;
}
.realmName-content .left .network{
    width: 224px;
    height: 160px;
    background:#212121;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}
.realmName-content .left .button{
    border-radius: 4px;
    width: 174px;
    height: 36px;
    margin-top: 20px;
    color: #f2b92c;
}
.realmName-content .network .top{
    display: flex;
    flex-direction: row;
    height: 44px;
    justify-content: flex-start;
    align-items: center;
}
.network .top .img{
    height: 44px;
    width: 44px;
    border-radius: 50px;
    background: #191919;
    text-align: center;
    margin-right: 20px;
}
.network .top img{
    width: 44px;
}
.network .top i{
    width: 4px;
    height: 4px;
    background:#f2b92c;
    border-radius: 50px;
    display: inline-block;
    margin-right: 8px;
}
.network .top p:first-child{
    font-size: 14px;
    line-height: 20px;
}
.network .top p:last-child{
    margin-top: 4px;
    font-size: 12px;
    color: #999;
    line-height: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.menu li{
    height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
.menu li.active span{
    color: #f2b92c;
}
.menu li img{
    width: 24px;
    height: auto;
}
.menu li span{
    font-size: 16px;
    color: #3d3d3d;
    margin-left: 20px;
}
.right{
    flex: 1;
    margin-left: 32px;
}
.right .card{
    background:#212121;
    border-radius: 10px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0 28px;
    position: relative;
}
.right .card .card-l{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.right .card .card-l img{
    width: 44px;
    height: auto;
    margin:28px 0;
    margin-right: 28px;
}
.right .card .button{
    padding: 0;
    margin: 0;
    border:none;
    font-size: 14px;
    color: #f2b92c;
}
.right .card .el-collapse{
    border-top: none;
    border-bottom: none;
    width: 100%;
}
.right .card .el-collapse button{
    background: none;
    border:1px solid #4d4d4d;
    height: 36px;
    border-radius: 4px;
    color: #4d4d4d;
    padding: 0 20px;
}
.right .card .el-collapse button.info{
    color: #333;
    background: #f2b92c;
    border:1px solid #f2b92c;
}
.right .card .el-tabs{
    width: 100%;
}
.right .card2 .btn{
    position: absolute;
    top: 10px;
    right: 28px;
    z-index: 999;
    height: 36px;
    background: #f2b92c;
    color: #333;
    border:none;
    font-size: 14px;
}
.container{
    flex: 1;
}
.book .empty{
    height: 324px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.book .empty img{
    width: 42px;
    height: auto;
}
.book .empty span{
    margin:22px 0;
    color: #4d4d4d;
    font-size: 20px;
}
.book .empty p{
    color: #808080;
    font-size: 14px;
}
.right .collected{
    display: inherit;
}
.collected-top{
     width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.collected-top .el-checkbox{
    margin-right: 40px;
}
.collected-top .el-button--info{
    width: 80px;
    height: 36px;
    background-color: #4d4d4d;
    color: #333;
    border:none
}
.collected-top .el-button--info.active{
    background-color: #f2b92c;
}
.collected-top .el-button--info:hover{
    background-color: #f2b92c;
}
.collected-content .info{
    width: 600px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.collected-content .info .input{
    width: 188px;
    height: 32px;
    margin-right: 74px;
    margin-top: 12px;
    margin-bottom: 34px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    border-radius: 4px;
}
.info .input .el-input{
    width: 64px;
}
.el-input.timeInput .el-input__inner{
    color: #fff;
}
.collected-content .info .input .el-button{
    padding:0;
    width: 32px;
    height: 32px;
    margin:0;
    border-radius: 0;
    background-color: #403f3e;
    border:none;
}
.collected-content .info .input .el-button:last-child{
    border-radius: 0 4px 4px 0;
}
.const .el-input__inner{
    height: 32px;
}
.collected-list .left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.collected-list .left i{
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background-color: #67E851;
    display: inline-block;
    margin-right: 10px;
}
.collected-list .left img{
    width: 12px;
    height: auto;
    margin-left: 10px;
}
.collected-list .left i.gray{
    background-color: #999;
}
.collected-list .r{
    font-size: 14px;
    color: #808080;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.collected-list .r img{
    width: 18px;
    height: auto;
    margin: 0 30px;
}
.right .cardL{
    padding:28px;
    display: flex;
    flex-direction: column;
}
.card-list{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-list .title{
    width: 150px;
    font-size: 14px;
}
.card-list-r{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.card-list-r i{
    width: 24px;
    height: 24px;
    background-color: #c4c4c4;
    border-radius: 50px;
    display: inline-block;
    margin-right: 10px;
}
.card-list-r span{
    display: inherit;
    line-height: 24px;
    font-size: 14px;
}
.card-list-r img{
    width: 13px;
    height: 13px;
    margin-top: 5px;
    margin-left: 10px;
}
.card-list-r .Extend{
    width: 70px;
    height: 36px;
    background-color: #f2b92c;
    color: #333333;
    border:none;
}
.card-list-r .set{
    background-color: #4d4d4d;
}
.right .cardL .card-list:nth-last-child(2){
    padding-bottom: 10px;
}
.right .cardL .card-list:last-child{
    padding-top: 10px;
    border-top: 1px dashed #404040;
}
.extend-content{
    width: 100%;
    padding:28px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #191919;
    margin-bottom: 12px;
}
</style>
